<template>
  <div style="padding-left: 8px;">
    <a-row type="flex" :gutter="10" style="width: 100%; height: 27px; align-items: center; margin-top: 5px; flex-wrap: nowrap; padding: 0 5px; background: #fff; border-radius: 5px">
      <a-col>
        <div class="box" style="margin-left: -10px;background: #1890ff;color: #fff;border-radius: 5px 0 0 5px;">
          店铺相关
        </div>
      </a-col>
      <a-col>
        <div class="box">
          <!-- 店铺档案 -->
          店铺档案
          <!-- 暂无 -->
        </div>
      </a-col>
      <a-col>
        <div class="box">
          <!-- 店铺上新 -->
          <newShop @login="loginVisible = true" />
        </div>
      </a-col>
      <a-col>
        <div class="box">
          <!-- 商品数and开店数 -->
          <productAndShop />
        </div>
      </a-col>
      <a-col>
        <div class="box">
          <!-- 店铺分析 -->
          <Shop @login="loginVisible = true"/>
        </div>
      </a-col>
      <a-col>
        <div class="box">
          <!-- 相似店铺 -->
          <LikeShop @login="loginVisible = true" />
        </div>
      </a-col>
      <a-col>
        <div class="box">
          <!-- 店铺名称 -->
           <downloadShopName @login="loginVisible = true" />
        </div>
      </a-col>
    </a-row>
    <user-login-modal :login-visible="loginVisible" @close="loginVisible = false"/>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import newShop from '~/contentScripts/views/tao/detail/components/storeRelated/newShop/index.vue';
import Shop from '~/contentScripts/views/tao/detail/components/analysis/shop.vue'
import LikeShop from '~/contentScripts/views/tao/detail/components/analysis/likeShop.vue'
import downloadShopName from '~/contentScripts/views/tao/detail/components/storeRelated/downloadShopName/index.vue'
import productAndShop from '~/contentScripts/views/tao/detail/components/storeRelated/productAndShop/index.vue'

const loginVisible = ref(false)
</script>

<style lang="less" scoped>
.box {
  height: 27px;
  display: flex;
  line-height: 21px;
  padding: 3px 8px;
  font-size: 12px;
  width: max-content;
  cursor: pointer;
}
.box:hover {
  background: rgba(64,169,255,.2);
}

</style>